<template>
  <div id="all">
    <el-card>
         <!--模糊查询-->
    <div class="search">
			<el-row gutter="20">
				<el-col :span="6">
					<el-input
              v-model="query.pkNo"
							size="medium"
							placeholder="请输入泊位编号">
					</el-input>
				</el-col>
				<el-col :span="2">
					<el-button type="primary" size="medium" @click="loadBerth">查询</el-button>
				</el-col>
				
				<el-col :span="13">
					<el-button type="info" size="medium" @click="reset">重置</el-button>
				</el-col>
        <el-col :span="2">
          <el-button type="success" size="medium" @click="dialog.addshow=true">添加</el-button>
        </el-col>
			</el-row>
        </div>

         <!--表格-->
         <el-table
				:data="parkTableData"
				stripe
				style="width: 100%;margin-top:10px">
			<el-table-column
					prop="pkNo"
					label="泊位编号">
			</el-table-column>
			<el-table-column
					prop="geoModel"
					label="地磁型号">
			</el-table-column>
			<el-table-column
					prop="pkStatus"
					label="泊位状态">
          <template slot-scope="scope">
        				<span v-if="scope.row.pkStatus=='-1'">未激活</span>
        				<span v-if="scope.row.pkStatus=='1'">有车</span>
                <span v-if="scope.row.pkStatus=='0'">无车</span>
       				</template>
			</el-table-column>
			<el-table-column
					prop="reservedVar"
					label="泊位名称">
			</el-table-column>
			<el-table-column
					prop="pkActiveTime"
					label="激活时间">
			</el-table-column>
            <el-table-column
					prop="pkCreatedTime"
					label="创建时间">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-dropdown trigger="click">
						<el-button size="mini" type="warning" >编辑</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item class="clearfix">
								<el-button size="mini" type="priamry" @click="handleEdit(scope.row.pkId)" plain>修改</el-button>
							</el-dropdown-item>
							<el-dropdown-item class="clearfix">
								<el-popconfirm
										title="这是一段内容确定删除吗？"  @confirm="handleDelete(scope.row.pkId)">
									<el-button size="mini" slot="reference" type="danger">删除</el-button>
								</el-popconfirm>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>

         <!--分页-->
         <el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="query.currentPage"
				:page-sizes="pageInfo.pageSizes"
				:page-size="query.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.total"
		>
		</el-pagination>

    <!--添加泊位-->
     <el-dialog title="添加泊位" :visible.sync="dialog.addshow" width="30%">
			<el-form ref="addForm" :model="addForm" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="泊位编号" prop="pkNo">
							<el-input v-model="addForm.pkNo"></el-input>
						</el-form-item>
						<el-form-item label="泊位名称" prop="reservedVar">
							<el-input v-model="addForm.reservedVar"></el-input>
						</el-form-item>
						<el-form-item label="泊位状态" prop="pkStatus">
							<el-input v-model="addForm.pkStatus"></el-input>
						</el-form-item>
						<el-form-item label="地磁型号" prop="geoId">
									<el-select
										v-model="addForm.geoId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in geoList"
										:key="item.geoId"
										:label="item.geoModel"
										:value="item.geoId"
										>
										</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="所属路段" prop="secId">
									<el-select
										v-model="addForm.secId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in secList"
										:key="item.secId"
										:label="item.secName"
										:value="item.secId"
										>
										</el-option>
									</el-select>
									</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
	 </el-dialog>

	<!--修改泊位信息-->
	<el-dialog title="修改泊位信息" :visible.sync="dialog.updateshow" width="30%">
			<el-form ref="updateForm" :model="updateForm" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="泊位编号" prop="pkNo">
							<el-input v-model="updateForm.pkNo"></el-input>
						</el-form-item>
						<el-form-item label="泊位名称" prop="reservedVar">
							<el-input v-model="updateForm.reservedVar"></el-input>
						</el-form-item>
						<el-form-item label="泊位状态" prop="pkStatus">
							<el-input v-model="updateForm.pkStatus"></el-input>
						</el-form-item>
						<el-form-item label="地磁型号" prop="geoId">
									<el-select
										v-model="addForm.geoId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in geoList"
										:key="item.geoId"
										:label="item.geoModel"
										:value="item.geoId"
										>
										</el-option>
									</el-select>
									</el-form-item>
						<el-form-item label="所属路段" prop="secId">
									<el-select
										v-model="updateForm.secId"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in secList"
										:key="item.secId"
										:label="item.secName"
										:value="item.secId"
										>
										</el-option>
									</el-select>
									</el-form-item>
						<el-form-item label="地磁编号" prop="geoId">
							<el-input v-model="updateForm.geoId"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
		</el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
	  geoList:{},
	  secList:{},
	  addForm:{},
	  updateForm:{},
      parkTableData:[],
      pageInfo: {
			pageSizes: [5, 10, 20, 50],
			total: 0,
		},
      query:{
          pkNo:"",
          currentPage:1,
          pageSize:5
        },
     dialog: {
		 addshow: false,
		 updateshow: false,
	   },
     };
  },
  methods: {
    loadBerth(){
        this.$axios.post("admin/park/getAllPark", this.query).then((res) => {
					this.parkTableData = res.data.data.list;
					this.pageInfo.total = res.data.data.total;
				});
    },
	 //请求所有的路段
	 loadSec() {
      this.$axios.get("admin/sec").then((res) => {
          this.secList = res.data.data;
        })
        .catch((error) => {
          this.$message.error("出错了，请稍后重试");
        });
    },
	//请求所有地磁型号
	loadGeo(){
        this.$axios.get("admin/geo/allGeo").then((res) => {
            this.geoList = res.data.data;
        })
        .catch((error) => {
          this.$message.error("出错了，请稍后重试");
        });
       },
    handleDelete(id){
      this.$axios.delete("admin/park/" + id).then((res) => {
			if (res.data.code == 200) {
				this.$message.success("删除成功");
				this.loadBerth();
				} else {
				this.$message.info("删除失败");
				}
			})
    },
	save(){
		this.$axios.post("admin/park", this.addForm).then((res) => {
          		this.$message.success("添加成功");
				this.loadBerth();
          		this.dialog.addshow = false;
          		//需要指定prop属性
          		this.$refs.addForm.resetFields();
            	//重置上传控件
         		this.$refs.upload.clearFiles();
          		  //修改是否显示对应的值
         		this.upload.uploadDisabled = false;
        });
	},
	handleEdit(id) {
		this.$axios.get("admin/park/" + id).then(res => {
			this.updateForm = res.data.data;
		});
			this.dialog.updateshow = true;
	},
	update() {
		this.$axios
		.put("admin/park/", this.updateForm).then((res) => {
				if (res.data.code == 200) {
					this.$message.success("修改成功");
					this.dialog.updateshow = false;
					this.loadBerth();
								
				} else {
					his.$message.error("修改失败");
					}
				})
	},
	reset(){
		this.query.pkNo = "";
		this.loadBerth();
	},
  },
  mounted(){
    this.loadBerth();
	this.loadSec();
	this.loadGeo();
  }
};
</script>